<template>
	<div>
		<Notice></Notice>
		<u-navbar :is-back="true">
			<view class="navbar-slot flex">
				<span class="type flex" @click="isType=!isType">
					<span class="text text-cut">全部</span>
					<u-icon class="icon" name="arrow-down" size="28" color="#999"></u-icon>
				</span>
				<u-search shape="square" v-model="value" @focus="isHistory=true;initStatus=true;" @search="search" @custom="search"></u-search>
			</view>
		</u-navbar>
		<div class="history" v-if="isHistory && !!words.length">
			<div class="title">历史搜索</div>
			<div class="words flex">
				<span class="word" v-for="(item, index) in words" :key="index" @click="wordSearch(item)">{{ item }}</span>
			</div>
			<div class="clear flex">
				<span class="clear-btn flex" @click="isClear = true">清空所有<u-icon class="icon" name="trash" size="32" color="#999"></u-icon></span>
			</div>
		</div>
		<u-sticky v-if="!initStatus">
			<div :class="'tools '+(isShowMask?'':'hide')">
				<u-dropdown @open="isShowMask = true" @close="isShowMask = false" v-if="!!filterList.length">
					<u-dropdown-item v-model="filterId" :title="filterTitle" :options="filterList" @change="filterChange"></u-dropdown-item>
				</u-dropdown>
				<div class="r flex">
					<i class="multiple" v-if="t==1" @click="$store.state.multipleMode = !$store.state.multipleMode"></i>
					<i class="filter" @click="$store.state.isFilter = true"></i>
				</div>
			</div>
		</u-sticky>
		<div class="container">
			<AllList ref="allList" v-show="!initStatus" v-if="t==1"></AllList>
			<WarnList ref="warnList" v-show="!initStatus" v-if="t==2"></WarnList>
		</div>

		<div class="options flex" v-if="$store.state.multipleMode && t==1">
			<u-checkbox v-model="isAllCheck" @change="checkAll">全选</u-checkbox>
			<div class="r flex">
				<div class="r-i" @click="addWarn">
					<u-image class="icon" width="36rpx" height="36rpx" src="./../../static/remind.png"></u-image>
					<div class="text">加入预警</div>
				</div>
			</div>
		</div>

		<u-popup v-model="isType" mode="top" z-index="200">
			<div class="type-box flex" :style="{ paddingTop: customBar+'rpx' }">
				<span class="type" :class="typeValue.length==5 && 'on'" @click="typeValue=[1, 2, 3, 4, 5]">全部</span>
				<span class="type" :class="(typeValue.length!=5&&typeValue.includes(item.value)) && 'on'" v-for="(item, index) in searchType" :key="index" @click="typeSelect(item)">{{ item.label }}</span>
			</div>
			<div class="btn-box flex">
				<u-button type="primary" style="width: 200rpx;margin: 0;" @click="typeConfirm">确定</u-button>
			</div>
		</u-popup>
		<u-modal v-model="isClear" title="删除" content="是否删除搜索记录" :show-cancel-button="true" @confirm="clear"></u-modal>
		<FilterPop :filters="filterList" :flag="flag"></FilterPop>
		<u-toast ref="uToast" />
	</div>
</template>

<script>
import { mapState } from "vuex";
import AllList from "@/components/allList.vue";
import WarnList from "@/components/warnList.vue";
import FilterPop from "@/components/filterPop.vue";
import { alias, addAlert } from "@/api/subject.js";

export default {
	components: {
		AllList, WarnList, FilterPop
	},
	data() {
		return {
			initStatus: true,
			t: null,
			flag: "home",

			value: "",
			words: [],
			typeValue: [1, 2, 3, 4, 5],
			searchType: [
				{label: "正文", value: 1},
				{label: "标题", value: 2},
				{label: "原文", value: 3},
				{label: "作者", value: 4},
				{label: "来源", value: 5},
			],

			isType: false,
			isClear: false,
			isHistory: false,

			isShowMask: false,
			filterList: [],
			filterTitle: "",
			filterId: "",

			isAllCheck: false,
			statusBar: 0,
			customBar: 0,
		};
	},
	watch: {
		selectedArticle(val) {
			if(val.length == this.articleListLength){
				this.isAllCheck = true;
			}else{
				this.isAllCheck = false;
			}
		},
	},
	computed: {
		...mapState(["selectedArticle", "articleListLength"]),
	},
	onLoad(option) {
		this.t = option.t
		this.flag = option.t==1 ? "home" : "warn";
		if(option.t==1){
			this.words = !uni.getStorageSync("searchWordsSubject") ? [] : uni.getStorageSync("searchWordsSubject");
		}else if(option.t==2){
			this.words = !uni.getStorageSync("searchWordsWarn") ? [] : uni.getStorageSync("searchWordsWarn");
		}
		
		uni.getSystemInfo({  
			success: (e) => {  
				let statusBar = 0  //状态栏高度  
				let customBar = 0  // 状态栏高度 + 导航栏高度  

				console.log('app-plus', e)  
				// #ifdef APP-PLUS  
				statusBar = e.statusBarHeight  
				customBar = e.statusBarHeight + 140
				// #endif  

				// #ifdef H5  
				statusBar = 0  
				customBar = e.statusBarHeight + 110
				// #endif
				this.statusBar = statusBar;
				this.customBar = customBar;
				console.log('状态栏高度', statusBar)  
				console.log('状态栏高度 + 导航栏高度', customBar)  
			}  
		})
	},
	methods: {
		clear() {
			this.words = [];
		},
		typeConfirm() {
			this.isType = false;
			this.search();
		},
		typeSelect(e) {
			if(this.typeValue.length == 5){
				this.typeValue = [];
				this.typeValue.push(e.value);
			}else{
				if(this.typeValue.includes(e.value)){
					this.typeValue = this.typeValue.filter(i=>i!=e.value);
					if(!this.typeValue.length) this.typeValue = [1, 2, 3, 4, 5];
				}else{
					this.typeValue.push(e.value);
				}
			}
		},
		search() {
			if(!!this.value.length && !this.words.includes(this.value)){
				this.words.push(this.value);
				if(this.t==1){
					uni.setStorageSync("searchWordsSubject", this.words);
				}else if(this.t==2){
					uni.getStorageSync("searchWordsWarn", this.words);
				}
			}
			this.isHistory=false;
			this.initStatus = false;
			let searchParams = {
				top_search_range: this.typeValue,
				top_search_value: this.value
			};
			if(this.t==1){
				this.$refs.allList.$emit("search", searchParams);
			}else if(this.t==2){
				this.$refs.warnList.$emit("search", searchParams);
			}
		},
		wordSearch(val) {
			this.value = val;
			this.search();
		},
		checkAll(e) {
			this.$refs.allList.$emit("checkAll", e.value)
		},
		addWarn() {
			if(!this.selectedArticle.length){
				this.$refs.uToast.show({
					title: "请选择信息",
					type: "error",
				});
			}else{
				let ids = this.selectedArticle.map(item=>item.id);
				let subjectsId = this.selectedArticle.map(item=>item.subject_id);
				addAlert({
					id: ids,
					subject_id: subjectsId,
					summary: ""
				}).then(({code})=>{
					if(code == 200){
						this.$refs.uToast.show({
							title: "加入预警成功",
							type: "success",
						});
					}
				});
			}
		},
		async getFilterList() {
			let params = {
				tag_type: 1,
				tag_id: null
			};
			if(this.t==2){
				params.type = 2;
			}
			let {data} = await alias(params);
			// uni.hideLoading();
			if(!!data.length){
				this.filterTitle = data[0].filter_title;
				this.filterId = data[0].id;
				this.$store.state.filterParams = data[0];
			}else{
				this.$store.state.filterParams = {};
			}
			this.filterList = data;
			this.filterList.map(item=>{
				item.label = item.filter_title;
				item.value = item.id;
			});
		},
		filterChange(val) {
			let filter = this.filterList.filter(item=>item.id == val)[0];
			this.filterId = val;
			this.filterTitle = filter.filter_title;
			this.$store.state.filterParams = {...this.$store.state.filterParams, ...filter};
			if(this.t==1){
				this.$store.commit("isRefreshAllListHandle", new Date().getTime());
			}else if(this.t==2){
				this.$store.commit("isRefreshWarnListHandle", new Date().getTime());
			}
		},
	}
}
</script>

<style lang="scss">
.navbar-slot{
	width: 100%;
	align-items: center;
	.type{
		box-sizing: border-box;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		margin-right: 20rpx;
		.text{
			max-width: 90rpx;
		}
		.icon{
			margin-left: 10rpx;
		}
	}
}
.history{
	padding: 20rpx;
	.title{
		font-size: 32rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
	.words{
		flex-wrap: wrap;
	}
	.word{
		border: 1rpx solid #f0f0f0;
		padding: 8rpx 20rpx;
		margin: 10rpx;
		border-radius: 8rpx;
		font-size: 30rpx;
	}
	.clear{
		justify-content: flex-end;
		color: #999;
		.clear-btn{
			cursor: pointer;
		}
	}
}
.type-box{
	padding: 100rpx 20rpx 20rpx;
	flex-wrap: wrap;
	.type{
		cursor: pointer;
		padding: 16rpx 40rpx;
		border: 1rpx solid #f0f0f0;
		margin: 0 20rpx 20rpx;
		border-radius: 10rpx;
	}
	.on{
		background-color: #1E62FC;
		border: 1rpx solid #1E62FC;
		color: #fff;
	}
}
.container{
	padding-bottom: 10rpx;
	height: calc(100vh - 170rpx);
}
.btn-box{
	border-top: 1rpx solid #f0f0f0;
	padding: 20rpx;
	justify-content: flex-end;
}
.tools{
	background-color: #fff;
	border-bottom: 1rpx solid #F0F0F0;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	height: 80rpx;
	position: relative;
	z-index: 100;
	.r{
		position: absolute;
		z-index: 100;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		align-items: center;
		i{
			cursor: pointer;
			width: 50rpx;
			height: 50rpx;
			margin: 0 10rpx;
		}
		.multiple{
			background: url(./../../static/confirm.png) no-repeat center/contain;
		}
		.filter{
			background: url(./../../static/filter-records.png) no-repeat center/contain;
		}
	}
	&.hide{
		/deep/ .u-dropdown__content{ 
			display: none;
		}
	}
}
/deep/ .u-dropdown__menu{
	height: 80rpx !important;
}
/deep/ .u-dropdown__menu__item{
	justify-content: unset;
	padding-left: 20rpx;
}
.options{
	width: 100%;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
	position: fixed;
	z-index: 500;
	left: 0;
	bottom: 0;
	box-shadow: 0rpx -6rpx 30rpx 0rpx rgba(192, 192, 192, 0.3);
	padding: 0 20rpx;
	box-sizing: border-box;

	.r{
		flex: 1;
		justify-content: space-around;
		
		.r-i{
			cursor: pointer;
			text-align: center;
		}
		.icon{
			margin: auto;
		}
		.text{
			font-size: 26rpx;
			padding-top: 10rpx;
		}
	}
}
</style>
